<template>
  <div class="company-management">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>医药公司管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 增加 -->
    <div class="add-btn-container">
      <el-button type="primary" icon="el-icon-circle-plus" @click="openAddDialog" size="medium">
        添加合作公司
      </el-button>
    </div>
    <!-- 添加对话框 -->
    <el-dialog title="添加合作公司" :visible.sync="addDialogVisible" width="50%" :before-close="handleAddDialogClose">
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="100px">
        <!-- 公司名称 -->
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="addForm.companyName"></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="companyPhone">
          <el-input v-model="addForm.companyPhone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 对话框底部操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddSave">保存</el-button>
      </div>
    </el-dialog>
    <!-- 搜索框 -->
    <el-input placeholder="查询（输入要查询的公司名称）" v-model="searchKeyword" class="search-input"
      @input="handleSearch"></el-input>
    <!-- 公司列表 -->
    <el-table :data="filteredCompanies" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="companyId" label="公司编号" sortable></el-table-column>
      <el-table-column prop="companyName" label="公司名称"></el-table-column>
      <el-table-column prop="companyPhone" label="联系电话"></el-table-column>
	  <el-table-column label="更新时间">
	    <template slot-scope="scope">
	      {{ formatDate(scope.row.updatetime) }}
	    </template>
		</el-table-column>
      <el-table-column label="注册时间">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createtime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-document" @click="viewDetails(scope.row)">查看</el-button>
          <el-button type="text" icon="el-icon-edit" @click="editCompany(scope.row)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" @click="delCompany(scope.row.companyId)"
            style="color: #F56C6C;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑医药公司" :visible.sync="editDialogVisible" width="50%" :before-close="handleEditDialogClose">
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
        <!-- 公司编号（只读） -->
        <el-form-item label="公司编号" prop="companyId">
          <el-input v-model="editForm.companyId" disabled></el-input>
        </el-form-item>

        <!-- 公司名称 -->
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="editForm.companyName"></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="companyPhone">
          <el-input v-model="editForm.companyPhone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 对话框底部操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSave">保存</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
        :current-page="currentPage" :page-size="pageSize"
        :total="total" layout="prev, pager, next, jumper" :disabled="loading"></el-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api'; // 导入封装的API模块

export default {
  data() {
    return {
      companies: [], // 原始数据（修正命名）
      filteredCompanies: [], // 过滤后的数据（用于展示）
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: '',
      mapVisible: false,
      loading: false,
      searchTimer: null, // 搜索防抖计时器
      editDialogVisible: false, // 编辑对话框显示控制
      editForm: {}, // 编辑表单数据（初始为空对象）
      editRules: { // 表单验证规则
        companyName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        companyPhone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 15, // 手机号格式验证
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      addDialogVisible: false, // 添加对话框显示控制
      addForm: { // 添加表单数据
        companyName: '',
        companyPhone: ''
      },
      addRules: { // 添加表单验证规则
        companyName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        companyPhone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          {
            min: 5,
            max: 15,// 手机号格式验证
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    };
  },

  mounted() {
    this.fetchCompanies();
  },

  methods: {
    // 格式化日期
    formatDate(isoString) {
      if (!isoString) return '-';
      try {
        const date = new Date(isoString);
        return date.toLocaleDateString('zh-CN');
      } catch (e) {
        return '-';
      }
    },

    // 搜索处理（带防抖）
    handleSearch() {
      // 清除之前的计时器
      if (this.searchTimer) clearTimeout(this.searchTimer);

      // 设置新的计时器（300ms防抖）
      this.searchTimer = setTimeout(() => {
        if (!this.searchKeyword.trim()) {
          this.filteredCompanies = [...this.companies];
          return;
        }

        const keyword = this.searchKeyword.toLowerCase();
        this.filteredCompanies = this.companies.filter(item =>
          item.companyName && item.companyName.toLowerCase().includes(keyword)
        );
      }, 300);
    },

    // 获取公司数据
    async fetchCompanies() {
      this.loading = true;
      try {
        const params = {
          currentPage: this.currentPage,     // 当前页码
          pageSize: this.pageSize,       // 每页条数
          keyword: this.searchKeyword    // 搜索关键词（可选）
        };

        const response = await api.company.getCompanies(params);

        if (response.code === 0) {
          this.companies = response.data.list || [];
          this.filteredCompanies = [...this.companies];
          this.total = response.data.total || 0;  // 从后端获取总记录数
        } else {
          this.$message.error(response.message || '获取数据失败');
        }
      } catch (error) {
        console.error('请求出错:', error);
        this.$message.error('数据加载失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },


    // 分页变化
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchCompanies();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;  // 重置为第一页
      this.fetchCompanies();
    },
    // 查看详情
    viewDetails(row) {
      console.log('查看详情:', row);
      // 实际项目中可以跳转到详情页
      // this.$router.push(`/company/detail/${row.companyId}`);
    },

    // 编辑公司
    editCompany(row) {
      console.log('编辑:', row);
      // 深拷贝当前行数据（避免直接修改原数据）
      this.editForm = JSON.parse(JSON.stringify(row));
      this.editDialogVisible = true;
    },

    // 关闭编辑对话框前重置表单状态
    handleEditDialogClose() {
      this.$refs.editFormRef && this.$refs.editFormRef.resetFields();
      this.editForm = {};
    },

    // 保存编辑内容（调用更新接口）
    async handleEditSave() {
      // 先校验表单
      const isValid = await new Promise(resolve => {
        this.$refs.editFormRef.validate(valid => resolve(valid));
      });
      if (!isValid) return;

      try {
        this.loading = true;
        // 调用更新接口（假设 api.company.update 对应后端 /company/update 接口）
        const response = await api.company.update({
          companyId: this.editForm.companyId, // 必填（主键）
          companyName: this.editForm.companyName, // 可选（新名称）
          companyPhone: this.editForm.companyPhone // 可选（新电话）
        });

        if (response.code === 0) {
          this.$message.success('修改成功');
          this.editDialogVisible = false; // 关闭对话框
          this.fetchCompanies(); // 刷新数据列表
        } else {
          this.$message.error(response.message || '修改失败');
        }
      } catch (error) {
        console.error('修改请求出错:', error);
        this.$message.error('修改失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    // 打开添加对话框
    openAddDialog() {
      this.addDialogVisible = true;
      this.addForm = {
        companyName: '',
        companyPhone: ''
      }; // 清空表单
    },
    // 关闭添加对话框前重置表单状态
    handleAddDialogClose() {
      this.$refs.addFormRef && this.$refs.addFormRef.resetFields();
      this.addForm = {
        companyName: '',
        companyPhone: ''
      };
    },

    // 保存新增公司（调用添加接口）
    async handleAddSave() {
      // 校验表单
      const isValid = await new Promise(resolve => {
        this.$refs.addFormRef.validate(valid => resolve(valid));
      });
      if (!isValid) return;

      try {
        this.loading = true;
        // 调用添加接口（api.company.add 对应后端 /company/add）
        const response = await api.company.add(this.addForm);

        if (response.code === 0) {
          this.$message.success('添加成功');
          this.addDialogVisible = false; // 关闭对话框
          this.fetchCompanies(); // 刷新数据列表（新增后自动刷新）
        } else {
          this.$message.error(response.message || '添加失败');
        }
      } catch (error) {
        console.error('添加请求出错:', error);
        this.$message.error('添加失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    // 删除公司
    async delCompany(companyId) {
      try {
        // 显示确认对话框
        await this.$confirm('确定要删除这个合作公司吗？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        this.loading = true;

        // 调用删除API - 使用正确的参数传递方式
        const response = await api.company.delete({
          companyId
        });

        if (response.code === 0) {
          this.$message.success('删除成功');
          // 重新加载数据（如果当前页只剩一条，返回上一页）
          if (this.companies.length === 1 && this.currentPage > 1) {
            this.currentPage -= 1;
          }
          this.fetchCompanies();
        } else {
          this.$message.error(response.message || '删除失败');
        }
      } catch (error) {
        // 用户取消删除时不做处理
        if (error !== 'cancel') {
          console.error('删除失败:', error);
          this.$message.error('删除失败，请稍后重试');
        }
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.company-management {
  padding: 20px;

  .map-toggle {
    margin-bottom: 15px;
  }

  .search-input {
    margin-bottom: 15px;
  }

  .el-table {
    margin-bottom: 15px;
  }

  .pagination {
    text-align: center;
  }

  .add-btn-container {
    margin: 15px 0;
    display: flex;
    justify-content: flex-end;

    .el-button {
      padding: 10px 20px;
      font-size: 14px;
    }
  }
}
</style>